<template>
    <div class="container">
        <r-text :text="data.title"></r-text>
        <div class="tabWrapper">
            <div :class="[{'tab': currIndex != index}, {'tab-active': currIndex == index}]" v-for="(item, index) in tabs" :key="index" @click="onTabClick(index)">
                {{item}}
            </div>
        </div>
        <div class="flex item" v-for="(item, index) in data.list[currIndex]" :key="index">
            <img :src="item.icon" v-show="data.title != '人才结构' && currIndex != 1">
            <template v-if="data.title =='人才求职'">
                <div style="padding-left:4px">
                    <div class="label">{{item.label}}</div>
                    <div class="value">{{item.value}}<span class="unit">{{item.unit}}</span></div>
                </div>
            </template>
            <template v-else-if="data.title =='发展环境'">
                <div style="padding-left:4px" v-if="currIndex == 0">
                    <div class="label">{{item.label}}</div>
                    <div class="value">{{item.value}}<span class="unit">{{item.unit}}</span></div>
                </div>
                <div style="padding-left:4px;" v-if="currIndex == 1">
                    <div class="label">{{item.label}}<span class="value">{{item.value}}</span><span class="unit">{{item.unit}}</span></div>
                </div>
            </template>
            <template v-else-if="data.title =='人才结构'">
                <div style="padding-left:4px" v-show="currIndex == 0">
                    <div class="label">{{item.label}}</div>
                    <div class="value">{{item.value}}<span class="unit">{{item.unit}}</span></div>
                </div>
                <div id="rcjgChart" class="chart"  v-show="currIndex == 1">
                </div>
            </template>
        </div>
    </div>
</template>
<script>
import RText from './RText.vue';
import * as echarts from 'echarts';
export default {
  components: { RText },
  props: {
    data: Object
  },
  data() {
    return {
        tabs: ['企业', '人才'],
        currIndex: 0,
        myChart: null
    }
  },
  watch: {
    data: {
        handler(oldV, newV) {
            this.$nextTick(() => {
                if (this.data.title == '人才结构' && this.currIndex == 1) {
                    this.$nextTick(() => {
                        this.showChart()
                    });
                }
            })
        },
        deep: true,
        
    }
  },
  methods: {
    onTabClick(index) {
        this.currIndex = index;
        if (this.data.title == '人才结构' && this.currIndex == 1) {
            this.$nextTick(() => {
                this.showChart()
            });
        }
    },
    showChart() {
        if (!this.myChart) {
            this.myChart = echarts.init(document.getElementById('rcjgChart'));
        } else {
            // this.myChart.clear();
        }
        let data = [...this.data.list[this.currIndex][0]]

        data = data.sort((a, b) => {return a.count - b.count});
        for(let i = 0; i < data.length; i++) {
            data[i]['value'] = (i + 1) * 20;
        }
        let option = {
            color: ['#FF453A', '#FFA00A', '#65D2FF', '#0884FF'],
            legend: {
                data: data,
                icon: 'rect',
                itemWidth: 8,
                itemHeight: 8,
                left: 90,
                orient: 'vertical',
                formatter: function(name) {
                    let value = 0;
                    for(let i = 0; i < data.length; i++) {
                        if (data[i].name == name) {
                            value = data[i].count;
                            break;
                        }
                    }
                    return `${name}{value|  ${value}  }{unit|万人}`
                },
                textStyle: {
                    color: '#FFF',
                    fontSize: 16,
                    rich: {
                        value: {
                            color: '#64E6E2',
                            fontWeight: 500,
                            fontSize: 16,
                        },
                        unit: {
                            color: 'rgba(255, 255, 255, 0.72)',
                            fontSize: 16,
                        }
                    }
                }
            },
            series: [{
                type: 'funnel',
                sort: 'ascending',
                label: {show: false},
                left: 0,
                top: 0,
                right: 160,
                bottom: 20,
                data: data,
                itemStyle: {
                    borderWidth: 0
                },
                emphasis: {
                    disabled: true
                }
            }]
        }
        this.myChart.setOption(option);
    }
  }
}
</script>
<style lang="less" scoped>
.container {
    box-sizing: border-box;
}
.tabWrapper {
    display: flex;
    position: relative;
    padding-right: 24px;
    margin-top: 20px;
    margin-bottom: 12px;
    cursor: pointer;
}
.tab {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    text-align: center;
    font-weight: 400;
    border: 1px solid rgba(4,74,143,1);
    padding: 4px 0;
    text-align: center;
    flex: 1;

    &-active {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #FFFFFF;
        letter-spacing: 0.96px;
        text-align: center;
        font-weight: 400;
        border: 1px solid rgba(100,230,226,1);
        padding: 4px 0;
        text-align: center;
        flex: 1;
        color: #64E6E2;
    }
}
.flex {
    display: flex;
}
img {
    width: 24px;
    height: 24px;
}
.label {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    font-weight: 400;
}
.value {
    font-family: DINPro-Medium;
    font-size: 16px;
    color: #64E6E2;
    letter-spacing: 0.96px;
    padding: 0 3px;
    font-weight: 500;
}
.unit {
    opacity: 0.72;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    font-weight: 400;
}
.item {
    padding-top: 8px;
    text-align: left;
    position: relative;
}
.chart {
    height:120px;
    width: 100%;
    position: absolute

}
</style>